package com.pj.compose.ui.page.widget

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyItemScope
import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountCircle
import androidx.compose.material.icons.filled.KeyboardArrowRight
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.rememberVectorPainter
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import com.pj.compose.ui.compose.AppTopBarColumn
import com.pj.compose.ui.theme.cEAEDEE

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun GroupListViewPage(navHostController: NavController) {
//    val screenHeight = LocalConfiguration.current.screenHeightDp
    var switchChecked by remember {
        mutableStateOf(false)
    }
    AppTopBarColumn(
        modifier = Modifier
            .background(Color.White)
            .fillMaxSize()
            .background(cEAEDEE),
        title = "FlowLayout", backClick = { navHostController.popBackStack() }) {
        LazyColumn(
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f)
                .background(Color.White),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            stickyHeader {
                SectionItem(text = "Section 1: 默认提供的样式")
            }
            item {
                Item(
                    text = "Item1",
                    leftContent = { SimpleLeftIcon() })
            }
            item {
                Item(
                    text = "Item2",
                    rightText = "在右侧的详细信息",
                    leftContent = {
                        SimpleLeftIcon()
                    })
            }
            item { Item(text = "Item3", subText = "在下方的详细信息") }
            item { Item(text = "Item4", hasArrow = true) }
            item {
                Item(
                    text = "Item5",
                    rightContent = {
                        Switch(
                            checked = switchChecked,
                            onCheckedChange = { switchChecked = switchChecked.not() })
                    })
            }
            item { Item(text = "Item6", subText = "在下方的详细信息", hasArrow = true) }
            item {
                Item(
                    text = "Item7",
                    subText = "在下方的详细信息",
                    hasArrow = true,
                    leftContent = { SimpleLeftIcon() })
            }
            item {
                Item(
                    text = "标题有点长；标题有点长；标题有点长；标题有点长；标题有点长；标题有点长；",
                    subText = "详细信息有点长；详细信息有点长；详细信息有点长；详细信息有点长；详细信息有点长；详细信息有点长；"
                )
            }
            stickyHeader {
                SectionItem(text = "Section1的描述")
            }
            stickyHeader {
                SectionItem(text = "Section2自定义右侧View/红点/new显示")
            }
            item {
                Item(
                    text = "右边自定义",
                    rightContent = { CircularProgressIndicator() })
            }
            item {
                Item(
                    text = "红点显示在左边",
                    subText = "在下方的详细信息",
                    hasArrow = true,
                    textRedPointType = 1,
                    leftContent = { SimpleLeftIcon() })
            }
            item {
                Item(
                    text = "红点显示在左边",
                    subText = "在下方的详细信息",
                    hasArrow = true,
                    rightRedPointType = 1,
                    leftContent = { SimpleLeftIcon() })
            }
            item {
                Item(
                    text = "红点显示在左边",
                    rightText = "在右方的详细信息",
                    hasArrow = true,
                    textRedPointType = 1,
                    leftContent = { SimpleLeftIcon() })
            }
            item {
                Item(
                    text = "红点显示在左边",
                    rightText = "在右方的详细信息",
                    hasArrow = true,
                    rightRedPointType = 1,
                    leftContent = { SimpleLeftIcon() })
            }
            item {
                Item(
                    text = "红点显示在左边",
                    subText = "在下方的详细信息",
                    hasArrow = true,
                    textRedPointType = 2,
                    leftContent = { SimpleLeftIcon() })
            }
            item {
                Item(
                    text = "红点显示在左边",
                    subText = "在右方的详细信息",
                    hasArrow = true,
                    rightRedPointType = 2,
                    leftContent = { SimpleLeftIcon() })
            }
            item {
                Item(
                    text = "new标识在左边",
                    rightText = "在右方的详细信息",
                    hasArrow = true,
                    textRedPointType = 2,
                    leftContent = { SimpleLeftIcon() })
            }
            item {
                Item(
                    text = "new标识在右边",
                    rightText = "在右方的详细信息",
                    hasArrow = true,
                    rightRedPointType = 2,
                    leftContent = { SimpleLeftIcon() })
            }
        }
    }
}

@Composable
fun SimpleLeftIcon() {
    Icon(
        painter = rememberVectorPainter(image = Icons.Default.AccountCircle),
        contentDescription = "",
        modifier = Modifier.fillMaxHeight(),
        tint = MaterialTheme.colorScheme.primary
    )
}

@Composable
private fun SectionItem(text: String, hasDivider: Boolean = true) {
    val dividerColor = MaterialTheme.colorScheme.onSurface
    Row(
        Modifier
            .fillMaxWidth()
            .background(color = Color(0xFFEEEEEE))
            .drawBehind {
                if (hasDivider)
                    drawLine(
                        color = dividerColor,
                        start = Offset(0f, size.height),
                        end = Offset(size.width, size.height),
                        strokeWidth = 1.dp.toPx()
                    )
            }
            .padding(horizontal = 15.dp, vertical = 10.dp)) {
        Text(text = text, color = Color.Black, fontSize = 14.sp)
    }
}

@Preview
@Composable
private fun ItemPre() {
    SectionItem("一条ITEM")
}

@Composable
private fun Item(
    text: String,
    textRedPointType: Int = 0,
    subText: String = "",
    rightText: String = "",
    rightRedPointType: Int = 0,
    hasArrow: Boolean = false,
    hasDivider: Boolean = true,
    leftContent: @Composable (() -> Unit) = {},
    rightContent: @Composable (() -> Unit) = {}
) {
    val dividerColor = MaterialTheme.colorScheme.onSurface
    Row(
        Modifier
            .fillMaxWidth()
            .drawBehind {
                if (hasDivider)
                    drawLine(
                        color = dividerColor,
                        start = Offset(0f, size.height),
                        end = Offset(size.width, size.height),
                        strokeWidth = 0.5.dp.toPx()
                    )
            }
            .padding(horizontal = 15.dp, vertical = 10.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(5.dp)
    ) {
        leftContent()
        Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(3.dp)) {
            Row(
                Modifier.fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.spacedBy(10.dp)
            ) {
                Text(text = text, color = Color.Black, fontSize = 14.sp)
                RedPointOrNew(textRedPointType)
            }
            if (subText.isNotEmpty()) {
                Text(text = text, color = Color.Gray, fontSize = 14.sp)
            }
        }
        if (rightText.isNotEmpty()) {
            Text(text = rightText, color = Color.Gray, fontSize = 14.sp)
        }
        RedPointOrNew(rightRedPointType)
        rightContent()
        if (hasArrow)
            Icon(
                painter = rememberVectorPainter(image = Icons.Default.KeyboardArrowRight),
                contentDescription = "forward"
            )
    }
}

@Composable
private fun RedPointOrNew(type: Int = 0, modifier: Modifier = Modifier) {
    when (type) {
        1 -> {
            Box(
                modifier = modifier
                    .size(5.dp)
                    .background(Color.Red, shape = RoundedCornerShape(5.dp))
            )
        }
        2 -> {
            Box(
                modifier = modifier
                    .height(16.dp)
                    .background(Color.Red, shape = RoundedCornerShape(8.dp))
                    .padding(horizontal = 5.dp),
                contentAlignment = Alignment.Center
            ) {
                Text(text = "new", fontSize = 12.sp, color = Color.White)
            }
        }
        else -> {}
    }

}

